"use client";

import { type TFileElement } from "platejs";
import { type PlateElementProps } from "platejs/react";

import { useMediaState } from "@platejs/media/react";
import { ResizableProvider } from "@platejs/resizable";
import { FileUp } from "lucide-react";
import { PlateElement, useReadOnly, withHOC } from "platejs/react";

import { Caption, CaptionTextarea } from "./caption";

export const FileElement = withHOC(
  ResizableProvider,
  function FileElement(props: PlateElementProps&lt;TFileElement&gt;) {
    const readOnly = useReadOnly();
    const { name, unsafeUrl } = useMediaState();

    return (
      &lt;PlateElement className="my-px rounded-sm" {...props}&gt;
        <a href target="_blank">
          <div>
            &lt;FileUp className="size-5" /&gt;
            <div>{name}</div>
          </div>

          &lt;Caption align="left"&gt;
            &lt;CaptionTextarea
              className="text-left"
              readOnly={readOnly}
              placeholder="Write a caption..."
            /&gt;
          &lt;/Caption&gt;
        </a>
        {props.children}
      &lt;/PlateElement&gt;
    );
  },
);
